<template>
	<view class="ys">
		<view class="example-body">
			<picker mode="date" @change="change" fields="month">
				<view class="datebox"><uni-icons type="calendar" :size="20"></uni-icons> {{time}}</view>
			</picker>
		</view>
		<view class="all">
			<view class="title">
				总收益
			</view>
			<view class="num">
				<text>￥</text> {{sum}}
			</view>
		</view>
		<view class="titles">
			月收益明细
		</view>
		<view class="list">

			<view class="item" v-for="(item,index) in list" :key="index" @click="toPage('./day?date='+item.date)">
				<view class="left">
					<view class="name">
						{{item.count}}笔/{{item.total}}元
					</view>
					<view class="time">
						{{item.date}}
					</view>
				</view>
				<uni-icons type="right" color="#777"></uni-icons>
			</view>
		</view>
		<view class="no-list" v-if="list.length == 0">
			- 暂无数据 -
		</view>
	</view>
</template>

<script>
	import {
		getIncome
	} from "@/api/user.js"
	export default {
		data() {
			return {
				time: '',
				sum: 0,
				list: []

			}
		},
		onLoad() {
			var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate();
			month >= 1 && month <= 9 ? (month = "0" + month) : "";
			this.time = year + '-' + month;
			this.getIncome()
		},
		methods: {
			change(e) {
				this.time = e.detail.value
				this.list = []
				this.getIncome()
			},
			getIncome() {
				getIncome({
					date: this.time
				}).then(res => {
					if (res.code == 0) {
						this.list = res.data.returnData
						this.sum = res.data.sum
					} else {
						uni.$showMsg(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.titles {
		font-weight: bold;
		font-size: 15px;
		padding: 0 2%;
		margin: 15px auto;
	}

	.example-body {
		background: #fff;
		position: sticky;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		padding: 10px;

		.datebox {
			display: flex;
			align-items: center;

			text {
				margin-right: 5px;
			}
		}
	}

	.list {
		padding: 0 2%;
		background: #fff;
		width: 96%;
		margin: 0 auto;
		border-radius: 10px;
		box-sizing: border-box;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px 10px;
			border-bottom: 1px solid #f2f2f2;

			.name {
				font-weight: bold;
				margin-bottom: 8px;
			}

			.time {
				color: #777;
				font-size: 12px;
			}
		}
	}

	.all {
		width: 96%;
		margin: 10px auto;
		border-radius: 10px;
		background: $uni-bg-color;
		color: #fff;
		padding-bottom: 20px;

		.title {
			font-weight: bold;
			font-size: 14px;
			padding: 15px;
		}

		.num {
			text-align: center;
			padding: 30px 0;
			font-weight: bold;
			font-size: 25px;

			text {
				font-size: 16px;
			}
		}
	}
</style>